<template>
  <!--  <main class="container main-container with-view-nav" style="max-width:1200px;">-->
  <!--    <nav role="navigation" class="view-nav web-only">-->
  <!--      <li class="nav-text"><a href="/user/37841185539176"><i-->
  <!--        class="icon byte-icon byte-icon&#45;&#45;left" style="position:relative;top:-1px;">-->
  <!--        <svg t="1561636243047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
  <!--             p-id="411757" xmlns:xlink="http://www.w3.org/1999/xlink">-->
  <!--          <path-->
  <!--            d="M389.76 512l346.88 346.88a21.12 21.12 0 0 1 0 30.08l-30.08 30.08a21.12 21.12 0 0 1-30.08 0L299.52 542.08a42.24 42.24 0 0 1 0-60.16l376.96-376.96a21.12 21.12 0 0 1 30.08 0l30.08 30.08a21.12 21.12 0 0 1 0 30.08z"-->
  <!--            p-id="411758"></path>-->
  <!--        </svg>-->
  <!--      </i>-->
  <!--        返回个人主页-->
  <!--      </a></li>-->
  <!--    </nav>-->
  <!--    <div class="placeholder-3"></div>-->
  <!--    <div class="h5-menu byte-tabs byte-tabs&#45;&#45;line byte-tabs&#45;&#45;horizontal">-->
  <!--      <div class="byte-tab-nav byte-tab-nav&#45;&#45;default byte-tab-nav&#45;&#45;line">-->
  <!--        <div class="byte-tab-nav__item-wrap">-->
  <!--          <div class="byte-tab-nav__item-scroll">-->
  <!--            <div class="byte-tab-nav__item-list" style="transform:translateX(-0px);">-->
  <!--              <div class="byte-tab-bar byte-tab-bar&#45;&#45;horizontal" style=""></div>-->
  <!--              <div data-id="tab-setting:profile" class="byte-tab-nav__item byte-tab-nav&#45;&#45;active"><span-->
  <!--                class="byte-tab-nav__item-text">个人资料</span></div>-->
  <!--              <div data-id="tab-setting:account" class="byte-tab-nav__item"><span-->
  <!--                class="byte-tab-nav__item-text">账号设置</span></div>-->
  <!--              <div data-id="tab-setting:message" class="byte-tab-nav__item"><span-->
  <!--                class="byte-tab-nav__item-text">消息设置</span></div>-->
  <!--              <div data-id="tab-setting:block" class="byte-tab-nav__item"><span-->
  <!--                class="byte-tab-nav__item-text">屏蔽管理</span></div>-->
  <!--            </div>-->
  <!--          </div>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--      <div class="byte-tabs__content">-->
  <!--        <div class="byte-tab-pane" style=""></div>-->
  <!--        <div class="byte-tab-pane" style="display: none;"></div>-->
  <!--        <div class="byte-tab-pane" style="display: none;"></div>-->
  <!--        <div class="byte-tab-pane" style="display: none;"></div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--    <div class="view setting-view">-->
  <!--      <div class="sidebar"><a href="/user/settings/profile"-->
  <!--                              class="router-link-exact-active route-active"-->

  <!--                              aria-current="page">-->
  <!--        <div class="nav-item active">-->
  <!--          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M14.2222 2C14.6518 2 15 2.29848 15 2.66667V13.3333C15 13.7015 14.6518 14 14.2222 14H1.77778C1.34822 14 1 13.7015 1 13.3333V2.66667C1 2.29848 1.34822 2 1.77778 2H14.2222ZM8.33333 10C8.51743 10 8.66667 10.1492 8.66667 10.3333V11C8.66667 11.1841 8.51743 11.3333 8.33333 11.3333H3.66667C3.48257 11.3333 3.33333 11.1841 3.33333 11V10.3333C3.33333 10.1492 3.48257 10 3.66667 10H8.33333ZM6 7.33333C6.18409 7.33333 6.33333 7.48257 6.33333 7.66667V8.33333C6.33333 8.51743 6.18409 8.66667 6 8.66667H3.66667C3.48257 8.66667 3.33333 8.51743 3.33333 8.33333V7.66667C3.33333 7.48257 3.48257 7.33333 3.66667 7.33333H6ZM12.2273 4.3335C12.3779 4.3335 12.5 4.4556 12.5 4.60622V7.60622C12.5 7.75685 12.3779 7.87895 12.2273 7.87895H9.77273C9.6221 7.87895 9.5 7.75685 9.5 7.60622V4.60622C9.5 4.4556 9.6221 4.3335 9.77273 4.3335H12.2273Z"-->
  <!--                  fill="#8A919F" class="close-path"></path>-->
  <!--          </svg>-->

  <!--          个人资料-->
  <!--        </div>-->
  <!--      </a> <a href="/user/settings/account" class="">-->
  <!--        <div class="nav-item">-->
  <!--          <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M4.7785 3.88783C4.7785 1.94111 6.35672 0.363281 8.30305 0.363281C10.2494 0.363281 11.8276 1.94111 11.8276 3.88783C11.8276 5.83456 10.2494 7.41239 8.30305 7.41239C6.35672 7.41239 4.7785 5.83456 4.7785 3.88783ZM2.03711 12.8169C2.03711 10.4809 3.90904 8.58745 6.21566 8.58745H10.3903C12.6969 8.58745 14.5689 10.4809 14.5689 12.8169V14.9316C14.5689 15.3209 14.2556 15.6366 13.8718 15.6366H2.73419C2.3504 15.6366 2.03711 15.3209 2.03711 14.9316V12.8169Z"-->
  <!--                  fill="#8A919F"></path>-->
  <!--          </svg>-->
  <!--          账号设置-->
  <!--        </div>-->
  <!--      </a> <a href="/user/settings/common" class="">-->
  <!--        <div class="nav-item">-->
  <!--          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M9.52929 1.16934C9.03085 1.05713 8.51879 1 7.99976 1C7.4806 1 6.96843 1.05715 6.46988 1.16942L6.18222 1.2342L5.2856 3.27897L3.07716 3.03754L2.87752 3.25499C2.1785 4.01637 1.65408 4.9245 1.34667 5.91628L1.26001 6.19586L2.57424 8L1.43235 9.56756L1.26001 9.80414L1.34667 10.0837C1.65408 11.0755 2.1785 11.9836 2.87752 12.745L3.07716 12.9625L5.2856 12.721L6.06381 14.4958L6.18222 14.7658L6.46988 14.8306C6.96843 14.9428 7.4806 15 7.99976 15C8.51879 15 9.03085 14.9429 9.52929 14.8307L9.81692 14.7659L10.7139 12.721L12.9224 12.9625L13.122 12.745C13.8209 11.9837 14.3453 11.0757 14.6527 10.0841L14.7394 9.80452L13.4253 8L14.5671 6.43206L14.7394 6.19548L14.6527 5.91593C14.3453 4.92428 13.8209 4.01628 13.122 3.25499L12.9224 3.03754L10.7139 3.27897L9.81692 1.2341L9.52929 1.16934ZM8.10175 10.2993C9.31678 10.2993 10.3018 9.31434 10.3018 8.09932C10.3018 6.88429 9.31678 5.89932 8.10175 5.89932C6.88673 5.89932 5.90175 6.88429 5.90175 8.09932C5.90175 9.31434 6.88673 10.2993 8.10175 10.2993Z"-->
  <!--                  fill="#8A919F" class="close-path"></path>-->
  <!--          </svg>-->
  <!--          通用设置-->
  <!--        </div>-->
  <!--      </a> <a href="/user/settings/message" class="">-->
  <!--        <div class="nav-item">-->
  <!--          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M9.05186 2.08489C9.05186 1.48572 8.56614 1 7.96697 1C7.36781 1 6.88209 1.48572 6.88209 2.08489V2.43127C6.01392 2.61567 5.24402 3.0205 4.62731 3.62715C3.75899 4.48131 3.23197 5.69796 3.12659 7.1599C3.03491 8.4319 2.84718 9.4646 1.8079 10.9355C1.3976 11.5162 1.77542 12.3909 2.54958 12.3909H13.4482C14.2224 12.3909 14.6002 11.5162 14.1899 10.9355C13.1506 9.4646 12.9629 8.4319 12.8712 7.1599C12.7659 5.69796 12.2388 4.48131 11.3705 3.62715C10.7387 3.00566 9.94615 2.59599 9.05186 2.41814V2.08489ZM6.24359 13.037C6.1262 13.037 6.01611 13.094 5.94833 13.1899C5.88055 13.2857 5.86351 13.4085 5.90263 13.5192C6.20741 14.3815 7.02978 15.0002 7.99757 15.0002C8.96536 15.0002 9.78772 14.3815 10.0925 13.5192C10.1316 13.4085 10.1146 13.2857 10.0468 13.1899C9.97902 13.094 9.86894 13.037 9.75155 13.037H6.24359Z"-->
  <!--                  fill="#8A919F" class="close-path"></path>-->
  <!--          </svg>-->
  <!--          消息设置-->
  <!--        </div>-->
  <!--      </a> <a href="/user/settings/block?type=author" class="">-->
  <!--        <div class="nav-item">-->
  <!--          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M13.2741 12.2136C15.3968 9.5633 15.2298 5.68383 12.773 3.22703C10.3162 0.770226 6.4367 0.603177 3.78642 2.72588L13.2741 12.2136ZM12.7873 12.7586L12.7586 12.7873C12.7634 12.7825 12.7682 12.7777 12.773 12.773C12.7777 12.7682 12.7825 12.7634 12.7873 12.7586ZM12.2134 13.2742C9.56318 15.3968 5.68379 15.2297 3.22703 12.773C0.770267 10.3162 0.603183 6.43682 2.72578 3.78656L12.2134 13.2742Z"-->
  <!--                  fill="#8A919F" class="close-path"></path>-->
  <!--          </svg>-->

  <!--          屏蔽管理-->
  <!--        </div>-->
  <!--      </a> <a href="/subscribe/subscribed" target="_blank" class="">-->
  <!--        <div class="nav-item">-->
  <!--          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg"-->
  <!--          >-->
  <!--            <path fill-rule="evenodd" clip-rule="evenodd"-->
  <!--                  d="M8.11733 14.365L14.3538 8.12855C14.7091 7.77417 14.8653 7.26633 14.7721 6.7722L13.9665 2.54878C13.8944 2.1743 13.5957 1.88567 13.2185 1.82722L9.21063 1.20795C8.73294 1.13488 8.24886 1.29289 7.90726 1.63449L1.64702 7.89382C1.05516 8.48568 1.05516 9.44563 1.64702 10.0375L5.97365 14.365C6.56552 14.9569 7.52547 14.9569 8.11733 14.365ZM9.80001 4.08669C10.0564 3.83027 10.4042 3.68622 10.7668 3.68622C11.1295 3.68622 11.4773 3.83027 11.7337 4.08669C11.9901 4.34311 12.1342 4.6909 12.1342 5.05353C12.1342 5.41617 11.9901 5.76395 11.7337 6.02037C11.4773 6.27679 11.1295 6.42084 10.7668 6.42084C10.4042 6.42084 10.0564 6.27679 9.80001 6.02037C9.54359 5.76395 9.39953 5.41617 9.39953 5.05353C9.39953 4.6909 9.54359 4.34311 9.80001 4.08669Z"-->
  <!--                  fill="#8A919F" class="close-path"></path>-->
  <!--          </svg>-->
  <!--          标签管理-->
  <!--        </div>-->
  <!--      </a></div>-->
  <!--      <div class="sub-view-box shadow setting-profile">-->
  <!--        <div class="setting-profile-view">-->
  <!--          <div class="nav-text">个人资料</div>-->
  <!--          <div class="user-infos">-->
  <!--            <div class="info-input">-->
  <!--              <form class="form byte-form byte-form&#45;&#45;label-right">-->
  <!--                <div class="divide"></div>-->
  <!--                <div class="byte-form-item"><label for="username" class="byte-form-item__label"-->
  <!--                                                   style="width: 56px;">用户名</label>-->
  <!--                  <div class="byte-form-item__content" style="margin-left: 56px;">-->
  <!--                    <div class="input byte-input byte-input&#45;&#45;normal byte-input&#45;&#45;suffixed">-->
  <!--                      <input type="text" autocomplete="" placeholder="填写你的用户名" name="" aria-label=""-->
  <!--                             spellcheck="false" maxlength="20"-->
  <!--                             class="byte-input__input byte-input__input&#45;&#45;normal"><span-->
  <!--                      class="byte-input__suffix"><span class="suffix">-->
  <!--                15/20-->
  <!--              </span></span></div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--                <div class="divide"></div>-->
  <!--                <div class="byte-form-item"><label for="job_title" class="byte-form-item__label"-->
  <!--                                                   style="width: 56px;">职位</label>-->
  <!--                  <div class="byte-form-item__content" style="margin-left: 56px;">-->
  <!--                    <div class="input byte-input byte-input&#45;&#45;normal byte-input&#45;&#45;suffixed">-->
  <!--                      <input type="text" autocomplete="" placeholder="填写你的职位" name="" aria-label=""-->
  <!--                             spellcheck="false" maxlength="100"-->
  <!--                             class="byte-input__input byte-input__input&#45;&#45;normal"><span-->
  <!--                      class="byte-input__suffix"><span class="suffix">-->
  <!--                0/50-->
  <!--              </span></span></div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--                <div class="divide"></div>-->
  <!--                <div class="byte-form-item"><label for="company" class="byte-form-item__label"-->
  <!--                                                   style="width: 56px;">公司</label>-->
  <!--                  <div class="byte-form-item__content" style="margin-left: 56px;">-->
  <!--                    <div class="input byte-input byte-input&#45;&#45;normal byte-input&#45;&#45;suffixed">-->
  <!--                      <input type="text" autocomplete="" placeholder="填写你的公司" name="" aria-label=""-->
  <!--                             spellcheck="false" maxlength="100"-->
  <!--                             class="byte-input__input byte-input__input&#45;&#45;normal"><span-->
  <!--                      class="byte-input__suffix"><span class="suffix">-->
  <!--                0/50-->
  <!--              </span></span></div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--                <div class="divide"></div>-->
  <!--                <div class="byte-form-item"><label for="blog_address" class="byte-form-item__label"-->
  <!--                                                   style="width: 56px;">个人主页</label>-->
  <!--                  <div class="byte-form-item__content" style="margin-left: 56px;">-->
  <!--                    <div class="input byte-input byte-input&#45;&#45;normal byte-input&#45;&#45;suffixed">-->
  <!--                      <input type="text" autocomplete="" placeholder="填写你的个人主页" name="" aria-label=""-->
  <!--                             spellcheck="false" maxlength="200"-->
  <!--                             class="byte-input__input byte-input__input&#45;&#45;normal"><span-->
  <!--                      class="byte-input__suffix"><span class="suffix">-->
  <!--                0/100-->
  <!--              </span></span></div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--                <div class="divide"></div>-->
  <!--                <div class="byte-form-item"><label for="description" class="byte-form-item__label"-->
  <!--                                                   style="width: 56px;">个人介绍</label>-->
  <!--                  <div class="byte-form-item__content" style="margin-left: 56px;">-->
  <!--                    <div class="textarea-input">-->
  <!--                      <div class="input textarea byte-input byte-input&#45;&#45;normal"><textarea-->
  <!--                        maxlength="200" rows="2" placeholder="填写职业技能、擅长的事情、喜欢的事情等" autocomplete="" name="" aria-label=""-->
  <!--                        spellcheck="false" class="byte-input__textarea"></textarea></div>-->
  <!--                      <span class="textarea-suffix">-->
  <!--              0/100-->
  <!--            </span></div>-->
  <!--                  </div>-->
  <!--                </div>-->
  <!--              </form>-->
  <!--              <div class="divide"></div>-->
  <!--              <button data-v-e1243e7c="" class="ui-btn save-btn primary large default">-->
  <!--                保存修改-->
  <!--              </button>-->
  <!--            </div>-->
  <!--            <div class="avatar-input">-->
  <!--              <div class="avatar-info">-->
  <!--                <div class="title h5-only">我的头像</div>-->
  <!--                <div class="avatar-uploader uploader">-->
  <!--                  <div class="click-cover"><i-->
  <!--                    class="add-icon byte-icon byte-icon&#45;&#45;plus-circle">-->
  <!--                    <svg t="1561635709826" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
  <!--                         xmlns="http://www.w3.org/2000/svg" p-id="375017" xmlns:xlink="http://www.w3.org/1999/xlink">-->
  <!--                      <path-->
  <!--                        d="M464.883436 464.883436V302.244035A23.732788 23.732788 0 0 1 488.616224 279.209271h46.069529a23.732788 23.732788 0 0 1 23.732788 23.034764v162.639401h162.6394a23.732788 23.732788 0 0 1 23.034765 23.732788v46.069529a23.732788 23.732788 0 0 1-23.034765 23.732788H558.418541v162.6394a23.732788 23.732788 0 0 1-23.732788 23.034765H488.616224a23.732788 23.732788 0 0 1-23.732788-23.034765V558.418541H302.244035A23.732788 23.732788 0 0 1 279.209271 534.685753V488.616224a23.732788 23.732788 0 0 1 23.034764-23.732788z m46.767552 465.581458a418.813906 418.813906 0 1 0-418.813906-418.813906 418.813906 418.813906 0 0 0 418.813906 418.813906z m0 92.837083a511.650988 511.650988 0 1 1 511.650989-511.650989 511.650988 511.650988 0 0 1-511.650989 511.650989z"-->
  <!--                        p-id="375018"></path>-->
  <!--                    </svg>-->
  <!--                  </i>-->
  <!--                    <div class="click-text">点击修改头像</div>-->
  <!--                  </div>-->
  <!--                  <div class="avatar jj-avatar avatar"-->
  <!--                       icon-url="https://p3-passport.byteacctimg.com/img/user-avatar/f53aaac9911cbdeb6508fa6e8ecc9e34~300x300.image">-->
  <!--                    <img-->
  <!--                      src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/58aaf1326ac763d8a1054056f3b7f2ef.svg"-->
  <!--                      alt="avatar" class="lazy avatar-img" loading="lazy"></div>-->
  <!--                  <input type="file" class="input"></div>-->
  <!--                <div class="title web-only">-->
  <!--                  我的头像-->
  <!--                </div>-->
  <!--                <div class="description">-->
  <!--                  支持 jpg、png、jpeg 格式大小 5M 以内的图片-->
  <!--                </div>-->
  <!--              </div>-->
  <!--            </div>-->
  <!--          </div>-->
  <!--        </div>-->
  <!--      </div>-->
  <!--    </div>-->
  <!--  </main>-->

  <main class="container main-container with-view-nav">
    <div class="view timeline-index-view">
            <!-- 分类导航栏 start -->
      <div :class="['index-nav', {'index-nav-top': systemStore.topViewNav}]">
        <div class="side-navigator-wrap">
          <div class="nav-item-wrap">
            <div :class="['nav-item-content', item.active ? 'active-nav' : undefined]" v-for="(item, index) in navItemArr" :key="index">
              <a @click="onCategoryChange(item, id, $event)" class="nav-item">
                <span class="nav-item-text">{{item.title}}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <nav role="navigation" class="view-nav web-only">
        <li class="nav-text"><a :href="`/user/${userInfo?.accountId}`"><i
          class="icon byte-icon byte-icon--left" style="position:relative;top:-1px;">
          <svg t="1561636243047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="411757" xmlns:xlink="http://www.w3.org/1999/xlink">
            <path
              d="M389.76 512l346.88 346.88a21.12 21.12 0 0 1 0 30.08l-30.08 30.08a21.12 21.12 0 0 1-30.08 0L299.52 542.08a42.24 42.24 0 0 1 0-60.16l376.96-376.96a21.12 21.12 0 0 1 30.08 0l30.08 30.08a21.12 21.12 0 0 1 0 30.08z"
              p-id="411758"></path>
          </svg>
        </i>
          返回个人主页
        </a></li>
      </nav>
      <nav role="navigation" :class="['view-nav','index-nav-before',{top: systemStore.topViewNav}]" ref="viewNavRef">
        <div class="nav-list left">
          <a @click="onCategoryChange(item, id, $event)" :class="['nav-item', item.active ? 'active' : undefined ]" v-for="(item, index) in navItemArr" :key="index">
            <div class="category-popover-box">
              <span>{{item.title}}</span>
            </div>
          </a>
        </div>
      </nav>

      <!-- 分类导航栏 end -->
      <div class="timeline-container">
        <!-- 主内容区 start -->
        <div class="timeline-content">
          <div class="timeline-entry-list">
            <NuxtPage />
          </div>
        </div>
        <!-- 主内容区 end -->
      </div>
    </div>
  </main>
</template>
<script setup lang="ts">
  // import {SITE_SEO_INFO} from '~/common/constants'
  // import request from '@/utils/request'
  // import {throwError} from '@/utils/throwError'
  // import { SUCCESS_CODE } from '~/common/constants'
  import {useSystemStore} from '~/store/system'

  const router = useRouter()
  const route = useRoute()
  const systemStore = useSystemStore()
  const nuxtApp = useNuxtApp()
  nuxtApp.$tokenExpireJudge()

  const userInfo = ref({})
  const navItemArr = ref([
    {
      title: '个人资料',
      routeName: 'profile',
      active: true,
      type: 'link'
    },{
      title: '账号设置',
      routeName: 'account',
      active: false,
      type: 'link'
    },{
      title: '通用设置',
      routeName: 'common',
      active: false,
      type: 'link'
    },{
      title: '消息设置',
      routeName: 'message',
      active: false,
      type: 'link'
    },{
      title: '屏蔽管理',
      routeName: 'block?type=author',
      active: false,
      type: 'link'
    },{
      title: '标签管理',
      routeName: 'subscribe/subscribed',
      active: false,
      type: 'link',
      target: '_blank'
    }
  ])

  const onCategoryChange = (navItem: any, index: number, e: MouseEvent) => {
    e.preventDefault()
    const nowActItem = navItemArr.value.find(item => item.active)
    nowActItem.active = false
    if (navItem.type === 'link') {
      navItem.active = true
      navSubRoute(navItem)
    }
  }

  function navSubRoute (e) {
    const rName = e.routeName
    if (e.target) {
      navigateTo(`${rName ? '/'+rName: ''}`)
    } else {
      navigateTo(`/user/settings${rName ? '/'+rName: ''}`)
    }
  }

  onMounted(() => {
    userInfo.value = useUserInfo().value
    const uPath = route.path.split('/')
    const subRouteName = uPath[uPath.length-1]
    for(let item of navItemArr.value) {
      if (item.routeName && item.routeName.startsWith(subRouteName)) {
        navItemArr.value[0].active = false
        item.active = true
        break
      }
    }
  })
</script>
<style scoped lang="scss">
  #show_time{font-family:"Micro";text-align:center;font-weight:bold;font-size:30px;color:#fff;text-shadow:1px 1px 2px #000}

  .large-container {
    .main-container {
      @include clearfix;
      max-width: $largeContainerWith;
      .timeline-index-view {
        margin-top: 86px;
        display: flex;
        flex-direction: row;
        .index-nav {
          width: 180px;
          position: sticky;
          top: 80px;
          margin-right: 20px;
          height: fit-content;
          border-radius: 4px;
          background-color: var(--tidy-layer-1);
          max-height: calc(100vh - 101px);
          overflow-x: hidden;
          .side-navigator-wrap {
            min-width: 180px;
            box-sizing: border-box;
            padding: 8px;
            font-size: 16px;
            color: #f2f3f5;
            .nav-item-wrap {
              display: flex;
              flex-direction: column;
              .nav-item-content {
                line-height: 24px;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                &.active-nav {
                  font-weight: 500;
                  background-color: var(--tidy-brand-6-light);
                }
                &:hover {
                  background-color: var(--tidy-gray-3);
                }
                &:hover,&.active-nav {
                  .nav-item {
                    color: var(--tidy-font-brand1-normal);
                    cursor: pointer;
                  }
                }
                .nav-item {
                  display: inline-block;
                  width: 100%;
                  box-sizing: border-box;
                  position: relative;
                  padding: 10px 17px;
                  cursor: pointer;
                  color: var(--tidy-font-2);
                  .nav-item-text {
                    position: relative;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
        .timeline-container {
          margin: 0 auto;
          .timeline-content {
            position: relative;
            .timeline-entry-list {
              margin-right: 280px;
              border-radius: 2px;
              width: 720px;
              position: relative;
            }
            .aside {
              width: 260px;
              position: absolute;
              top: 0;
              right: 0;
              z-index:1;
            }
          }
        }
      }
    }
  }

  .view-nav {
    &.web-only{
      left: inherit;
      width: 100%;
      max-width: 1200px;
      display: flex;
      align-items: center;
      margin: 24px auto 16px;
      padding-left: 22px;
      box-sizing: border-box;
      .nav-text {
        font-size: 14px;
        color: var(--tidy-font-brand1-normal);
        list-style: none;
        a {
          color: var(--tidy-font-brand1-normal);
        }
        .byte-icon {
          width: 12px;
          height: 12px;
          display: inline-block;
          vertical-align: middle;
          line-height: 1;
        }
      }
    }
  }
</style>
